<template>
  <div class="reg">
    <el-row>
      <el-col :span="12" :offset="6">
        <h2>请选择一种方式来绑定应用程序</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="6">
        <div class="reg-main">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="扫码授权" name="first">
              <p>前往微信公众平台进行授权</p>
              <el-button
                icon="el-icon-s-promotion"
                type="primary"
                round
                @click="toAuth"
                >跳转</el-button
              >
            </el-tab-pane>
            <el-tab-pane label="注册认证" name="second">注册认证</el-tab-pane>
            <el-tab-pane label="小程序帐号" name="third">
              <el-form
                label-position="right"
                label-width="120px"
                :model="formLabelAlign"
                ref="validateForm"
                :rules="rules"
              >
                <el-form-item prop="name" label="应用名称">
                  <el-col :span="20">
                    <el-input v-model="formLabelAlign.name"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item prop="type" label="账号类型">
                  <el-col :span="20">
                    <el-select
                      v-model="formLabelAlign.type"
                      placeholder="请选择账号类型"
                    >
                      <el-option
                        v-for="(type, index) in selectTypes"
                        :key="index"
                        :label="selectTypes[index]"
                        :value="index"
                      ></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item prop="appid" label="AppId">
                  <el-col :span="20">
                    <el-input v-model="formLabelAlign.appid"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item prop="appsecret" label="AppSecret">
                  <el-col :span="20">
                    <el-input v-model="formLabelAlign.appsecret"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item prop="encodingaeskey" label="EncodingAesKey">
                  <el-col :span="20">
                    <el-input
                      v-model="formLabelAlign.encodingaeskey"
                    ></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item prop="token" label="token">
                  <el-col :span="20">
                    <el-input v-model="formLabelAlign.token"></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('validateForm')"
                    >提交</el-button
                  >
                  <el-button @click="resetForm('validateForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { bindApplication } from "@/api/wx";
import { mapActions } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      selectTypes: {
        serv_account: "服务号",
        miniapp: "小程序",
        sub_account: "订阅号",
        work_account: "企业微信",
        web: "网站应用",
        app: "移动应用"
      },
      formLabelAlign: {
        name: "",
        type: "",
        appid: "",
        appsecret: "",
        encodingaeskey: "",
        token: ""
      },
      rules: {
        name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
        type: [
          { required: true, message: "请输入选择账号类型", trigger: "change" }
        ],
        appid: [{ required: true, message: "请输入appid", trigger: "blur" }],
        appsecret: [
          { required: true, message: "请输入appsecret", trigger: "blur" }
        ],
        encodingaeskey: [
          { required: true, message: "请输入encodingaeskey", trigger: "blur" }
        ],
        token: [{ required: true, message: "请输入token", trigger: "blur" }]
      },
      redirect: undefined,
      otherQuery: {}
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({
      setUserApp: "user/setUserApp"
    }),
    handleClick(tab, event) {},
    toAuth() {
      window.open("https://serv.uctoo.com/component/authorize"); //TODO:根据项目获取地址
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          bindApplication(this.formLabelAlign)
            .then(res => {
              if (res.code === 10000) {
                this.setUserApp(this.formLabelAlign.name);
                this.$router.push({
                  path: this.redirect || "/dashboard",
                  query: this.otherQuery
                });
              }
            })
            .catch(err => {
              console.info(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    }
  }
};
</script>

<style lang="scss" scoped>
.reg {
  background-color: #eaeaea;
  min-height: 100vh;
  &-main {
    background-color: white;
    border-radius: 5px;
    padding: 10px;
    min-height: 700px;
  }
}
</style>
